<template>
  <div class="ifram" style="width: 100%; height: 400px">
    <!-- <iframe :src="src" style="width: 100%; height: 100%"></iframe> -->

    <div class="map_content">
      <div id="base" class="">

        <!-- xb (形状) -->
        <div id="u0" class="ax_default _形状" data-label="xb" @click="getInit(138)">
          <img id="u0_img" class="img " src="@/assets/page_1/xb_u0.svg" />
          <div id="u0_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- xb B (形状) -->
        <div id="u1" class="ax_default _形状 ax_default_hidden" data-label="xb B" v-if="departmentID == 138" @click="getInit(138)">
          <img id="u1_img" class="img " src="@/assets/page_1/xb_b_u1.svg" />
          <div id="u1_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- Unnamed (形状) -->
        <div id="u2" class="ax_default _形状" selectiongroup="1" @click="getInit(139)">
          <img id="u2_img" class="img " src="@/assets/page_1/u2.svg" />
          <div id="u2_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- DG B (形状) -->
        <div id="u3" class="ax_default _形状 ax_default_hidden" data-label="DG B" selectiongroup="1" v-if="departmentID == 139" @click="getInit(139)">
          <img id="u3_img" class="img " src="@/assets/page_1/dg_b_u3.svg" />
          <div id="u3_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- dbt (形状) -->
        <div id="u4" class="ax_default _形状" data-label="dbt" @click="getInit(137)">
          <img id="u4_img" class="img " src="@/assets/page_1/dbt_u4.svg" />
          <div id="u4_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- dbt B (形状) -->
        <div id="u5" class="ax_default _形状 ax_default_hidden" data-label="dbt B" v-if="departmentID == 137" @click="getInit(137)">
          <img id="u5_img" class="img " src="@/assets/page_1/dbt_b_u5.svg" />
          <div id="u5_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- YL (形状) -->
        <div id="u6" class="ax_default _形状" data-label="YL" @click="getInit(136)">
          <img id="u6_img" class="img " src="@/assets/page_1/yl_u6.svg" />
          <div id="u6_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- YL B (形状) -->
        <div id="u7" class="ax_default _形状 ax_default_hidden" data-label="YL B" v-if="departmentID == 136" @click="getInit(136)">
          <img id="u7_img" class="img " src="@/assets/page_1/yl_b_u7.svg" />
          <div id="u7_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- DT (形状) -->
        <div id="u8" class="ax_default _形状" data-label="DT" @click="getInit(109)">
          <img id="u8_img" class="img " src="@/assets/page_1/dt_u8.svg" />
          <div id="u8_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- DT B (形状) -->
        <div id="u9" class="ax_default _形状 ax_default_hidden" data-label="DT B" v-if="departmentID == 109" @click="getInit(109)">
          <img id="u9_img" class="img " src="@/assets/page_1/dt_b_u9.svg" />
          <div id="u9_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- EH (形状) -->
        <div id="u10" class="ax_default _形状" data-label="EH" @click="getInit(182)"> <!--鹅湖镇 -->
          <img id="u10_img" class="img " src="@/assets/page_1/eh_u10.svg" />
          <div id="u10_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- EH B (形状) -->
        <div id="u11" class="ax_default _形状 ax_default_hidden" data-label="EH B" v-if="departmentID == 182" @click="getInit(182)">
          <img id="u11_img" class="img " src="@/assets/page_1/eh_b_u11.svg" />
          <div id="u11_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- HQ (形状) -->
        <div id="u12" class="ax_default _形状" data-label="HQ" @click="getInit(160)"> <!-- 厚桥街道 -->
          <img id="u12_img" class="img " src="@/assets/page_1/hq_u12.svg" />
          <div id="u12_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- HQ B (形状) -->
        <div id="u13" class="ax_default _形状 ax_default_hidden" data-label="HQ B" v-if="departmentID == 160" @click="getInit(160)">
          <img id="u13_img" class="img " src="@/assets/page_1/hq_b_u13.svg" />
          <div id="u13_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- AZ (形状) -->
        <div id="u14" class="ax_default _形状" data-label="AZ" @click="getInit(110)">
          <img id="u14_img" class="img " src="@/assets/page_1/az_u14.svg" />
          <div id="u14_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- AZ B (形状) -->
        <div id="u15" class="ax_default _形状 ax_default_hidden" data-label="AZ B" v-if="departmentID == 110" @click="getInit(110)">
          <img id="u15_img" class="img " src="@/assets/page_1/az_b_u15.svg" />
          <div id="u15_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- yj (形状) -->
        <div id="u16" class="ax_default _形状" data-label="yj" @click="getInit(111)">
          <img id="u16_img" class="img " src="@/assets/page_1/yj_u16.svg" />
          <div id="u16_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- yj B (形状) -->
        <div id="u17" class="ax_default _形状 ax_default_hidden" data-label="yj B" v-if="departmentID == 111" @click="getInit(111)">
          <img id="u17_img" class="img " src="@/assets/page_1/yj_b_u17.svg" />
          <div id="u17_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u18" class="ax_default _一级标题" selectiongroup="1" @click="getInit(138)">
          <div id="u18_div" class=""></div>
          <div id="u18_text" class="text ">
            <p><span>锡北镇</span></p>
          </div>
        </div>

        <!-- dg 00 (图片 ) -->
        <div id="u19" class="ax_default _图片_ ax_default_hidden" data-label="dg 00" style="display:none; visibility: hidden">
          <img id="u19_img" class="img " src="@/assets/page_1/dg_00_u19.png" />
          <div id="u19_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- YJ 00 (图片 ) -->
        <div id="u20" class="ax_default _图片_ ax_default_hidden" data-label="YJ 00" style="display:none; visibility: hidden">
          <img id="u20_img" class="img " src="@/assets/page_1/dg_00_u19.png" />
          <div id="u20_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- EH 00 (图片 ) -->
        <div id="u21" class="ax_default _图片_ ax_default_hidden" data-label="EH 00" style="display:none; visibility: hidden">
          <img id="u21_img" class="img " src="@/assets/page_1/dg_00_u19.png" />
          <div id="u21_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- YL 00 (图片 ) -->
        <div id="u22" class="ax_default _图片_ ax_default_hidden" data-label="YL 00" style="display:none; visibility: hidden">
          <img id="u22_img" class="img " src="@/assets/page_1/dg_00_u19.png" />
          <div id="u22_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- AZ 00 (图片 ) -->
        <div id="u23" class="ax_default _图片_ ax_default_hidden" data-label="AZ 00" style="display:none; visibility: hidden">
          <img id="u23_img" class="img " src="@/assets/page_1/dg_00_u19.png" />
          <div id="u23_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- 6 (图片 ) -->
        <div id="u24" class="ax_default _图片_ ax_default_hidden" data-label="6" style="display:none; visibility: hidden">
          <img id="u24_img" class="img " src="@/assets/page_1/dg_00_u19.png" />
          <div id="u24_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- dbt 00 (图片 ) -->
        <div id="u25" class="ax_default _图片_ ax_default_hidden" data-label="dbt 00" style="display:none; visibility: hidden">
          <img id="u25_img" class="img " src="@/assets/page_1/dg_00_u19.png" />
          <div id="u25_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- DT 00 (图片 ) -->
        <div id="u26" class="ax_default _图片_ ax_default_hidden" data-label="DT 00" style="display:none; visibility: hidden">
          <img id="u26_img" class="img " src="@/assets/page_1/dg_00_u19.png" />
          <div id="u26_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- Unnamed (图片 ) -->
        <div id="u27" class="ax_default _图片_">
          <img id="u27_img" class="img " src="@/assets/page_1/u27.png" />
          <div id="u27_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u28" class="ax_default _一级标题" selectiongroup="1" @click="getInit(139)">
          <div id="u28_div" class=""></div>
          <div id="u28_text" class="text ">
            <p><span>东港镇</span></p>
          </div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u29" class="ax_default _一级标题" selectiongroup="1" @click="getInit(111)">
          <div id="u29_div" class=""></div>
          <div id="u29_text" class="text ">
            <p><span>羊尖镇</span></p>
          </div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u30" class="ax_default _一级标题" selectiongroup="1" @click="getInit(182)">
          <div id="u30_div" class=""></div>
          <div id="u30_text" class="text ">
            <p><span>鹅湖镇</span></p>
          </div>
        </div>

        <!-- AZ N (矩形) -->
        <div id="u31" class="ax_default _一级标题" data-label="AZ N" selectiongroup="1" @click="getInit(110)">
          <div id="u31_div" class=""></div>
          <div id="u31_text" class="text ">
            <p><span>安&nbsp;&nbsp; 镇</span></p>
          </div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u32" class="ax_default _一级标题" selectiongroup="1" @click="getInit(136)">
          <div id="u32_div" class=""></div>
          <div id="u32_text" class="text ">
            <p><span>云林街道</span></p>
          </div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u33" class="ax_default _一级标题" selectiongroup="1" @click="getInit(109)">
          <div id="u33_div" class=""></div>
          <div id="u33_text" class="text ">
            <p><span>东亭街道</span></p>
          </div>
        </div>

        <!-- DBT n (矩形) -->
        <div id="u34" class="ax_default _一级标题" data-label="DBT n" selectiongroup="1" @click="getInit(137)">
          <div id="u34_div" class=""></div>
          <div id="u34_text" class="text ">
            <p><span>东北塘</span></p>
          </div>
        </div>

        <!-- HQ n (矩形) -->
        <div id="u35" class="ax_default _一级标题" data-label="HQ n" selectiongroup="1" @click="getInit(160)">
          <div id="u35_div" class=""></div>
          <div id="u35_text" class="text ">
            <p><span>厚桥街道</span></p>
          </div>
        </div>

        <!-- HQ 00 (图片 ) -->
        <div id="u36" class="ax_default _图片_ ax_default_hidden" data-label="HQ 00" style="display:none; visibility: hidden">
          <img id="u36_img" class="img " src="@/assets/page_1/dg_00_u19.png" />
          <div id="u36_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>
      </div>
    </div>
    <div class="box_b">
      <div class="box_title">社区矫正工作数据</div>
      <div class="box_flex">
        <div class="box_item">
          <p>{{ detail.JZ || 0 }}</p>
          <p>社区矫正</p>
        </div>
        <div class="box_item">
          <p>{{ detail.BF || 0 }}</p>
          <p>安置帮扶</p>
        </div>
        <div class="box_item">
          <p>{{ detail.ZG || 0 }}</p>
          <p>后续照管</p>
        </div>
        <div class="box_item">
          <p>{{ detail.Warn || 0 }}</p>
          <p>超期走访</p>
        </div>
        <div class="box_item">
          <p>{{ detail.Remind || 0 }}</p>
          <p>临期走访</p>
        </div>
        <div class="box_item">
          <p>{{ detail.Normal || 0 }}</p>
          <p>正常走访</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCount } from "@/api/login";

export default {
  components: {},
  data () {
    return {
      //src: "static/map/map.html",
      departmentID: 1,
      detail: {},
    };
  },
  computed: {},
  watch: {
    $route: {
      handler (to) {
        this.getInit(1);
      },
    },
  },
  methods: {
    async getInit (id) {
      this.departmentID = id
      const { data } = await getCount({ departmentID: id || 1 });
      console.log(data);
      this.detail = data;
    },
  },
  created () { },
  mounted () {
    this.getInit(1);
  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
};
</script>
<style lang="less">
@import url('./styles.css');

.map_content {
  width: 100%;
  height: 450px;
}

.box_b {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 350px;
  background: #ffffff;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  box-shadow: 0 -8px 8px rgba(0, 0, 0, 0.3);

  .box_title {
    text-align: center;
    height: 60px;
    line-height: 70px;
    font-weight: bold;
  }

  .box_flex {
    display: flex;
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;
    flex-wrap: wrap;
    justify-content: space-between;

    .box_item {
      width: 31%;
      margin-right: 10px;
      margin-bottom: 10px;
      height: 80px;
      text-align: center;
      border-radius: 10px;
      border: 1px solid #6081a3;
      padding-top: 12px;
      p {
        margin: 0;
        &:first-child {
          font-size: 16px;
          font-weight: bold;
        }
        &:last-child {
          font-size: 18px;
        }
      }
      &:nth-child(odd) {
        background: #6081a3;
        color: #ffffff;
      }
      // border:
      &:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
}
</style>
